<template>
  <div class="bg">
    <el-card class="box-card">
      <el-row type="flex" class="row-bg" justify="end">
        <el-col :span="6" :offset="24">
          <el-input style="width:300px" v-model="selectCode" placeholder="请输入用户昵称、手机号查询"></el-input>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-select v-model="status" placeholder="账号状态" style="width:200px" @change="selectChange">
            <el-option label="正常" :value="1"></el-option>
            <el-option label="冻结" :value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-date-picker
            v-model="firstdata"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择开始日期"
          ></el-date-picker>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-date-picker
            v-model="enddata"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择结束日期"
          ></el-date-picker>
        </el-col>
        <el-col :span="6" :offset="1">
          <div style="display:flex">
            <el-button type="primary" @click="searchDate">查询</el-button>
            <el-button type="success" @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格展示 -->
    <el-card class="card">
      <div slot="header">
        <el-row type="flex" justify="space-between">
          <el-col :span="22">
            <div class="merchantData">
              <div style="margin-right:20px">
                <span class="addmerchant">昨日新增用户</span>
                <span class="merchantNum">{{userdata.yestarDayUser}}</span>
                <span class="addmerchant">人</span>
              </div>
              <div style="margin-right:20px">
                <span class="addmerchant">近三天新增</span>
                <span class="merchantNum">{{userdata.threeDayUser}}</span>
                <span class="addmerchant">人</span>
              </div>
              <div style="margin-right:20px">
                <span class="addmerchant">累计注册用户</span>
                <span class="merchantNum">{{userdata.totalUser}}</span>
                <span class="addmerchant">人</span>
              </div>
            </div>
          </el-col>
          <el-col :span="2">
            <el-button type="success" @click="exports">导出数据</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 表格展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="index" width="100" label="序号" align="center"></el-table-column>
        <el-table-column label="头像" align="center">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 80px" :src="scope.row.userHeadImg"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="用户昵称" align="center"></el-table-column>
        <el-table-column prop="userPhone" label="手机号码" align="center"></el-table-column>
        <el-table-column prop="userPetNumber" label="宠物" align="center"></el-table-column>
        <!-- <el-table-column prop="petPostnNumber" label="宠物数量" align="center"></el-table-column> -->
        <el-table-column prop="userFansNumber" label="粉丝" align="center"></el-table-column>
        <el-table-column prop="userDynamicNumber" label="动态" align="center"></el-table-column>
        <el-table-column prop="userGoldCoin" label="金币余额" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.userId === tabClickIndex ">
              <el-input
                size="small"
                v-model="scope.row.userGoldCoin"
                @change="goldMoneychange"
                maxlength="5"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              ></el-input>
            </span>
            <span v-else>{{scope.row.userGoldCoin}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userCurrency" label="宠币余额" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.userId === tabClickIndex ">
              <el-input
                size="small"
                v-model="scope.row.userCurrency"
                @change="petMoneychange"
                maxlength="5"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              ></el-input>
            </span>
            <span v-else>{{scope.row.userCurrency}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userRations" label="口粮余额" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.userId === tabClickIndex ">
              <el-input
                size="small"
                v-model="scope.row.userRations"
                @change="footMoneychange"
                maxlength="5"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              ></el-input>
            </span>
            <span v-else>{{scope.row.userRations}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userCreateTime" label="注册时间" width="180" align="center"></el-table-column>
        <el-table-column label="账号状态" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.userStatus==1?'正常':scope.row.userStatus==2?'冻结':'删除'}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
            <el-button
              v-if="scope.row.userId === tabClickIndex "
              @click="compilesave(scope.row)"
              type="warning"
              size="small"
            >保存</el-button>
            <el-button v-else @click="redact(scope.row)" type="warning" size="small">编辑</el-button>
            <el-button
              @click="frozen(scope.row)"
              type="danger"
              size="small"
            >{{scope.row.userStatus==2?'解冻账号':'冻结账号'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="total,  prev, pager, next, jumper"
        :total="total"
        :current-page="current"
        @current-change="handleCurrentChange"
        style="margin-top:24px"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { export2Excel } from "@/components/commom.js";
export default {
  data() {
    return {
      tabClickIndex: 0, //用户列表id
      value1: "",
      downloadLoading: false,
      tableData: [],
      userdata: {}, //获取用户数据
      total: 0,
      current: 1,
      pagesize: 10, //显示多少条
      firstdata: "", //开始日期
      enddata: "", //结束日期
      status: "", //状态有效
      selectCode: "", //查询条件
      // 获取金币余额，获取宠币余额
      goldMoney: 0, //获取金币余额
      footMoney: 0, //获取口粮余额
      petMoney: 0 //获取金币余额
    };
  },
  mounted() {
    // 用户列表数据
    this.userlist();
    // 用户数据
    this.getuserdata();
  },
  methods: {
    // 获取用户数据
    getuserdata() {
      this.$http.article.getuserdata().then(res => {
        this.userdata = res.result;
        console.log("获取用户数据", res);
      });
    },
    // 获取用户列表
    userlist() {
      var param = {
        size: this.pagesize,
        current: this.current,
        // 模糊查询
        startDate: this.firstdata,
        endDate: this.enddata,
        selectCode: this.selectCode,
        status: this.status
      };
      this.$http.article.getuserlist(param).then(res => {
        console.log("获取用户列表", res);
        this.tableData = res.result.records; //用户列表数据
        this.total = res.result.total; //用户列表总条数

        //显示每页展示的数量
        res.result.records.forEach((item, index) => {
          //res.data.data.list 表格数据     forEach为每一项添加数据
          item.index = index + 1 + (this.current - 1) * this.pagesize;
          // this.currentPage当前页  this.pageParams.size 每页显示多少    :page-sizes="[10,20,30,50]" 分页大小

          return item;
        });
      });
    },
    // 编辑
    redact(val) {
      this.tabClickIndex = val.userId; //是否显示输入框
      //获取用户数量详情
      this.$http.article.getuser({ petUserId: val.userId }).then(res => {
        let dataMoney = res.result;
        this.goldMoney = dataMoney.userGoldCoin;
        this.petMoney = dataMoney.userCurrency;
        this.footMoney = dataMoney.userRations;
        console.log("获取用户详情", res);
      });
    },
    // 保存
    compilesave(val) {
      // 请求参数
      let param = {
        userId: val.userId,
        userGoldCoin: this.goldMoney,
        userCurrency: this.petMoney,
        userRations: this.footMoney,
      };
      // 修改用户金币数量
      this.$http.article.updateUser(param).then(res => {
        if (res.code == 200) {
          this.tabClickIndex = null;
          this.$message.success(res.msg);
          this.userlist();
        }
        console.log("获取修改用户金币数量", res);
      });
    },
    // 获取宠币余额
    petMoneychange(val) {
      this.petMoney = val;
      console.log("获取宠币余额", val);
    },
    // 获取金币余额
    goldMoneychange(val) {
      this.goldMoney = val;
      console.log("获取金币余额", val);
    },
    // 获取口粮余额
    footMoneychange(val){
      this.footMoney=val;
    },
    // 模糊查询
    searchDate() {
      this.current = 1; //模糊查询
      // 模糊查询
      this.userlist();
    },
    // 分页查询
    handleCurrentChange(val) {
      this.current = val;
      this.userlist();
      console.log("分页查询", val);
    },
    //选择下拉查询
    selectChange(val) {
      this.status = val;
      console.log(val);
    },
    // 冻结账号
    frozen(val) {
      let message = "";
      if (val.userStatus == 1) {
        message = "冻结账号";
      } else {
        message = "解冻账号";
      }
      this.$confirm(`此操作将${message}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let text = "";
          let message = "";
          if (val.userStatus == 1) {
            text = 2;
            message = "冻结成功";
          } else {
            text = 1;
            message = "解冻成功";
          }
          let param = {
            userId: val.userId,
            userStatus: text
          };
          this.$http.article.updateUser(param).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: message
              });
              this.userlist();
            }
          });
        })
        .catch(() => {
          let message = "";
          if (val.userStatus == 1) {
            message = "取消冻结";
          } else {
            message = "取消解冻";
          }
          this.$message({
            type: "info",
            message: message
          });
        });
    },
    // 重置搜索框清空输入框
    reset() {
      this.firstdata = ""; //开始日期
      this.enddata = ""; //结束日期
      this.status = ""; //状态有效
      this.selectCode = ""; //查询条件: "", //开始日期
      this.enddata = ""; //结束日期
      this.status = ""; //状态有效
      this.selectCode = ""; //查询条件
      this.userlist();
    },

    // 导出execl
    exports() {
      const hader = [
        {
          title: "用户头像",
          date: "userHeadImg"
        },
        {
          title: "用户昵称",
          date: "userName"
        },
        {
          title: "用户手机号",
          date: "userPhone"
        },
        {
          title: "宠物数量",
          date: "userPetNumber"
        },
        {
          title: "粉丝",
          date: "userFansNumber"
        },
        {
          title: "动态",
          date: "userDynamicNumber"
        },
        {
          title: "金币余额",
          date: "userGoldCoin"
        },
        {
          title: "宠币余额",
          date: "userCurrency"
        },
        {
          title: "口粮余额",
          date: "userRations"
        },
        {
          title: "注册时间",
          date: "userCreateTime"
        },
        {
          title: "账号状态",
          date: "userStatus"
        }
      ];
      // 表名
      const excelName = "用户数据";
      // 请求导出数据
      let param = {
        size: this.total,
        current: 1
      };
      // 请求后台接口
      this.$http.article.getuserlist(param).then(res => {
        const list = res.result.records.map(item => {
          //这里对数据进行处理
          if (item.userStatus) {
            item.userStatus = item.userStatus == 1 ? "正常" : "冻结";
          }
          return item;
        });
        // 调用表格导出数据
        export2Excel(hader, list, excelName);
      });
    },

    // 查看用户详情
    handleClick(val) {
      console.log("查看用户", val);
      this.$router.push({
        path: "/home/lookuser",
        query: {
          userId: val.userId
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.merchantData {
  display: flex;
  align-items: center;
  padding-top: 14px;
  .addmerchant {
    color: #409eff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .merchantNum {
    color: #f23a3a;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 800;
  }
}

.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  padding-top: 10px;
}
.box-card {
  width: 98%;
  height: 80px;
  margin: 0 auto;
}
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>